<template>
	<view class="content">
		<u-navbar placeholder :bgColor="bgColor" :border="false" autoBack>
			<view slot="center">
				新增自定义笔记
			</view>
		</u-navbar>
		<view class="scroll-wrap">
			<scroll-view class="scroll-view_H" scroll-y @scrolltolower="loadMore" :lower-threshold="50">
				<view class="note-container">
					<view class="note-li" v-for="(item, i) in list" :key="i">
						{{ item.topic }}
					</view>
					<view v-if="loading" class="loading-text">
						加载中...
					</view>
					<view v-if="noMore" class="no-more-text">
						没有更多数据了
					</view>
				</view>
			</scroll-view>
		</view>
		<tn-toast ref="toast"></tn-toast>
	</view>
</template>

<script>
	import noteInfo from '@/api/index.js';
	import loginInfo from '@/api/login.js';
	export default {
		data() {
			return {
				bgColor: "transparent",
				list: [{
					id: 151,
					topic: '题目1'
				}], // 数据列表
				page: 2, // 当前页码
				pageSize: 20, // 每页条数
				loading: false, // 是否正在加载
				noMore: false, // 是否没有更多数据
				params: {
					id: '',
					name: '',
					type: 0
				}
			}
		},
		onLoad(options) {
			if (options.params) {
				let obj = JSON.parse(decodeURIComponent(options.params));
				this.params.id = obj.id;
				this.params.name = obj.name;
				this.params.type = obj.type;
			}
		},
		onReady() {},
		mounted() {
			this.getList(); // 初始化加载数据
		},
		methods: {
			// 获取数据
			async getList() {
				if (this.noMore || this.loading) return;
				this.loading = true;
				try {
					const queryData = {
						pageQueryDTO: {
							currentPage: this.page,
							pageSize: this.pageSize
						},
						userId: uni.getStorageSync('userId'),
						type: uni.getStorageSync('bindType'),
						systemNoteId: this.params.id,
						code: uni.getStorageSync('bindCode')
					}
					let res;
					if (this.params.type == 0) {
						res = await noteInfo.getNoteSystemQueryApi(this.params.id, queryData);
					} else {
						res = await noteInfo.getNoteUserQueryApi(this.params.id, queryData);
					}
					if (res.data.code == 200) {
						if (this.page === 0) {
							this.list = [...this.list, ...res.data.data.pageResultDTO?.content];
						} else {
							this.list = [...this.list, ...res.data.data.pageResultDTO?.content];
						}
						if (res.data.data.pageResultDTO.content.length < this.pageSize) {
							this.noMore = true;
						} else {
							this.page++;
						}
					}
				} catch (error) {
					console.error("加载失败:", error);
				} finally {
					this.loading = false;
				}
			},
			// 上拉加载更多
			loadMore() {
				this.getList();
			},
			onSelect(e) {
				const {
					name,
					value
				} = e
				this.formData[name] = value
			},
			goChooseQuestions() {
				uni.navigateTo({
					url: './chooseQuestions'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-wrap {
		width: 400rpx;
		height: 66rpx;
		border-radius: 40rpx;
		opacity: 1;
		background: #FCFCFC;
	}

	.h1 {
		display: flex;
		align-items: center;
		font-size: 42rpx;
		font-weight: 600;
		color: #000;
		margin: 40rpx 0 40rpx 24rpx;
	}

	.scroll-wrap {
		width: 100%;
		height: calc(100vh - 200rpx);

		.scroll-view_H {
			height: 100%;

			.note-container {
				display: flex;
				flex-wrap: wrap;
				padding: 32rpx;
				box-sizing: border-box;

				.note-li {
					width: calc(100% - 20rpx);
					margin: 10rpx;
					padding: 0 24rpx;
					background: #fff;
					border-radius: 16rpx;
					overflow: hidden;
					box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.1);
				}

				.top {
					padding: 20rpx;
					display: flex;
					justify-content: space-between;
					border-bottom: 2rpx solid #f5f5f5;
					background: #fafafa;

					.top-left {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						flex: 1
					}

					.top-right {
						width: 46rpx;
						height: 46rpx;
						border-radius: 50%;
						border: 2rpx solid #000;
						font-size: 18rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}

				.bottom {
					height: 140rpx;
					display: flex;
					align-items: center;
					padding: 20rpx;
				}

				.font-24 {
					font-size: 24rpx;
					color: #999;
					margin-top: 16rpx;
				}

				.shadow {
					box-shadow: inset 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
				}

				.loading-text,
				.no-more-text {
					width: 100%;
					text-align: center;
					display: flex;
					justify-content: center;
					padding: 20rpx;
					color: #999;
				}
			}
		}
	}
</style>